<template>
  <div id="type_scale_charts" style="width: 100%;height: 100%;"></div>
</template>
<script>
export default {
  mounted() {
    this._initCharts()
  },
  props: {
    data: Array,
    default: () => []
  },
  methods: {
    _initCharts () {
        if(!this.data || !this.data.length) {
            return
        }
        console.log(this.data)
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("type_scale_charts"))
      
      let data1 =  this.data[0]

      let data2 =  this.data[1]


      const  colorList=[ '#6498FF','#C07636'];
      const option = {
          legend: {
              show:false,
              orient: 'horizontal',
              icon: 'circle',
              bottom : 30,
              itemGap : 15,
              textStyle: {
                  rich: {
                      x :{
                          fontSize : 20,
                          padding: [10, 10, 30, 0],
                      },
                      0: {
                          color: colorList[0],
                          fontSize : 20
                      },
                      1: {
                          color: colorList[1],
                          fontSize : 20
                      }
                  }
              },
              // formatter: function(name){
              //     for (let i = 0; i < echartData.length; i++) {
              //         if(name == echartData[i].name){
              //             return  '{x|'+ name+'}\n{'+i+'|'+echartData[i].value+'}项';
              //         }
              //     }
              // }
          },
          tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
          },
          series: [
              // 主要展示层的
              {
                  radius: ['0%', '40%'],
                  center: ['70%', '50%'],
                  type: 'pie',
                  itemStyle: {
                      normal: {
                          color: function(params) {
                              return colorList[params.dataIndex]
                          }
                      }
                  },
                  label:{
                      normal:{
                          position: 'outside' ,
                          formatter: '{b}\n{d}%',
                          fontSize: 12
                      }
                  },
                  labelLine: {
                      normal:{
                          length: 5,
                          length2:0,
                          lineStyle: {
                              width: 0
                          }
                      }  
                  },
                  data: data2
              },
              // 边框的设置
              {
                  radius: ['0%', '40%'],
                  center: ['30%', '50%'],
                  type: 'pie',
                  // animation: false,
                  label:{
                      normal:{
                          position: 'outside' ,
                          formatter: '{b}\n{d}%',
                          fontSize: 12
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: function(params) {
                              return colorList[params.dataIndex]
                          }
                      }
                  },
                  labelLine: {
                      normal:{
                          length: 0,
                          length2:0,
                          lineStyle: {
                              width: 0
                          }
                      }  
                  },
                  nameTextStyle: {
                      fontSize: 15
                  },
                  data: data1
              }
          ]
      };

      // 绘制图表
      myChart.setOption(option)
      
      
    }

  }
  
}
</script>
<style lang="scss" scoped>
.charts_container {
  width: 100%;
  height: 305px;
  margin-right: 19px;
  position: relative;
  box-sizing: border-box;
}
</style>